<template>
  <div ref="myChart" class="radar-echart" />
</template>

<script>
import {getRoomList} from '@/api/rooms'
const echarts = require('echarts')
import Rooms from '@/utils/constant/rooms'
export default {
 async mounted() {
   await this.getData()
    // 初始化一个echarts容器
    const myChart = echarts.init(this.$refs.myChart)
    myChart.setOption({
       tooltip: {
        trigger: 'axis',
        axisPointer: {            
            type: 'shadow'        
        },
    },
    legend: {
        data: ['利润', '支出', '收入']
    },
    grid: {
        left: '3%',
        right: '10%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'value'
        }
    ],
    yAxis: [
        {
            type: 'category',
            axisTick: {
                show: false
            },
            data: this.roomTypes
        }
    ],
    series: [
        {
            name: '利润',
            type: 'bar',
            label: {
                show: true,
                position: 'inside'
            },
            emphasis: {
                focus: 'series'
            },
            data: this.profit
        },
        {
            name: '收入',
            type: 'bar',
            stack: '总量',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: this.income
        },
        {
            name: '支出',
            type: 'bar',
            stack: '总量',
            label: {
                show: true,
                position: 'left'
            },
            emphasis: {
                focus: 'series'
            },
            data: this.pay
        }
    ]
    })
  },
  data(){
    return{
      data:[],
      roomTypes:Rooms.type.map(item=>item.value),
      income:[],
      profit:[],
      pay:[]
    }
  },
  methods:{
   async getData(){
     const rst= await getRoomList()
    //  console.log(rst);
    let bigRoom={inm:0,pay:0}
    let DBRoom={inm:0,pay:0}
    let loverRoom={inm:0,pay:0}
    let richRoom={inm:0,pay:0}
    let waterRoom={inm:0,pay:0}  //水床房
    let beautyRoom={inm:0,pay:0} //美女陪聊房
    let handsome={inm:0,pay:0} //帅哥
    let ElectronicRoom={inm:0,pay:0} //电竞房
    rst.forEach(item=>{
      switch(item.type){
        case 1:{
          this.getNum(bigRoom,item)
          return
        }
        case 2:{
          this.getNum(DBRoom,item)
          return
        }
        case 3:{
          this.getNum(loverRoom,item)
          return
        }
        case 4:{
          this.getNum(richRoom,item)
          return
        }
        case 5:{
          this.getNum(waterRoom,item)
          return 
        }
          case 6:{
          this.getNum(beautyRoom,item)
        }
          case 7:{
          this.getNum(handsome,item)
        }
          case 8:{
          this.getNum(ElectronicRoom,item)
        }
      }
    })
    let  list=[bigRoom,DBRoom,loverRoom,richRoom,waterRoom,beautyRoom,handsome,ElectronicRoom]
    // console.log(list);
    list.forEach(item=>{
        this.pay.push(-item.pay)
        this.income.push(item.inm)
        this.profit.push(item.inm-item.pay)
    })
    },
    getNum(Obj,item){
          let inm=item.price&&item.time?item.price*item.time:0
          let pay=item.repair&&item.repair.expenditure?item.repair.expenditure:0
          Obj.inm+=inm
          Obj.pay+=pay
    }
  }
}
</script>

<style>
.radar-echart {
  width: 1000px;
  height: 600px;
}
</style>
